<template>
  <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑用户' : '新增用户'">
    <el-form ref="formRef" :model="userForm" label-width="100px" :rules="rules">
      <el-form-item label="账户" prop="account">
        <el-input v-model="userForm.account" />
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="userForm.name" />
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="userForm.phone" />
      </el-form-item>
      <el-form-item label="角色" prop="role">
        <el-select v-model="userForm.role" placeholder="请选择角色" clearable>
          <el-option
            v-for="item in roleOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button color="#19af7d" @click="submitForm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, computed, watch, ref } from "vue";

import { ElMessage, type FormInstance, type FormRules } from "element-plus";

// 定义表单数据类型
type UserForm = {
  account: string;
  name: string;
  phone: string;
  role: string;
};

type RoleOption = {
  value: string;
  label: string;
};

const props = defineProps<{
  modelValue: boolean;
  isEdit: boolean;
  userFormData: UserForm;
}>();

const emit = defineEmits(["update:modelValue", "save", "close"]);

const userForm = reactive<UserForm>({ ...props.userFormData });

// 更新表单数据
watch(
  () => props.userFormData,
  (newData) => {
    Object.assign(userForm, newData);
  },
  { immediate: true }
);

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit("update:modelValue", value),
});

const formRef = ref<FormInstance>();

// 角色列表
const roleOptions = reactive<RoleOption[]>([
  { value: "admin", label: "管理员" },
  { value: "user", label: "普通用户" },
  { value: "guest", label: "访客" },
]);

// 表单验证规则
const rules = reactive<FormRules<UserForm>>({
  account: [{ required: true, message: "请输入账户", trigger: "blur" }],
  name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  phone: [
    { required: true, message: "请输入电话", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入正确的手机号码",
      trigger: "blur",
    },
  ],
  role: [{ required: true, message: "请选择角色", trigger: "change" }],
});

const handleClose = () => {
  dialogVisible.value = false;
  Object.assign(userForm, props.userFormData);
  emit("close");
};

const submitForm = async () => {
  if (!formRef.value) return;
  await formRef.value.validate((valid, fields) => {
    if (valid) {
      emit("save", { ...userForm });
      ElMessage.success(props.isEdit ? "编辑用户成功" : "新增用户成功");
      handleClose();
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>

<style lang="scss" scoped></style>
